<template>
	<view style="width: 100%;float: left;"> 
		<view style="margin-top: 40rpx;margin-left: 50rpx;line-height: 60rpx;font-size: 35rpx;">
			<image src="../../static/images/icon/fh.png" style="width: 40rpx;margin-top: 10rpx;float: left;" mode="widthFix" @click="back"></image>
			<view style="float: left;margin-left: 20rpx;">{{info.name}}</view>
		</view>
		<view class="top">
			<view class="d1">
				<view class="title">
					题库练习
				</view>
			</view> 
			<view class="d2">
				{{info.name}}
			</view>
			<view class="d3">
				<view class="t1">时长</view>
				<view class="t2">{{info.time}}分钟</view>
			</view>
			<view class="d4">
				<view class="t1">
					总题库数: {{info.questNum}}道
				</view>
				<view class="t2">
					本次抽取: {{info.chouquNum}}道
				</view> 
			</view>
		</view>
		<view class="msg">
			<view class="t1 fsize1">
				本次练习答对大于60道题即可获得100积分
			</view>
			<view class="t1 fsize2">
				1、在有限时间内答 对60+道题
			</view>
			<view class="t1 fsize2">
				2、如未答对或已经警错的情况下点击解析，再次改答案是不计入正确题数的，请耐心答题哦-
			</view>
			<view class="t1 fsize1 mt1">
				让我们开始吧
			</view>
		</view>
		
		<view class="go" @click="go">
			开始练习
		</view>
	</view>
</template>

<script>
	import {
		getQuestBankById
	} from "@/common/api/training/training.js";
	export default {
		data() {
			return { 
				info:{
					chouquNum:0,
					hasScores:100,
					id:'',
					name:'',
					questNum:'',
					roundedValue:'',
					time:'',
				}
			};
		},
		onLoad(option) { 
			if(option.id){
				getQuestBankById({id:option.id}).then((res) => {
				  if (res && res.code == 200 && res.data) { 
						this.info = res.data;
				  }
				});
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			scantron(){
				uni.navigateTo({
					url:"/pages/training/scantron"
				})
			}, 
			go(){
				uni.navigateTo({
					url:"/pages/training/question_topic?id="+this.info.id
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	 
	page {
		background-image: url("../../static/training/bg1.png") ;
		background-size: 100% 900rpx;
		background-repeat: no-repeat; 
	}
	.msg{
		width: 90%;float: left;margin-left: 5%;margin-top: 20rpx;border-radius: 20rpx;background: white;height: auto;
		.t1{
			width: 90%;float: left;margin-left: 5%;margin-top: 30rpx;
		}
		.fsize1{
			font-size: 26rpx;font-weight: bold;
		}
		.fsize2{
			font-size: 23rpx;
		}
		.mt1{
			margin: 40rpx;margin-bottom: 50rpx;
		}
	}
	.top{
		width: 94%;float: left;margin-top: 30rpx;margin-left: 3%;
		height: 260rpx;
		background-image: url("../../static/training/zsd.png");
		background-size: 100% 260rpx;
		.d1{
			width: 100%;float: left;
			.title{
				width: 150rpx;text-align: center;float: right;background: #4189FF;border-top-right-radius: 20rpx;border-bottom-left-radius: 20rpx;margin-right: 15rpx;margin-top: 10rpx;color: white;font-size: 23rpx;height: 40rpx;line-height: 40rpx;
			}
		}
		.d2{
			width: 90%;float: left;margin-left: 5%;
		}
		.d3{
			width: 90%;float: left;margin-left: 5%;font-size: 22rpx;line-height: 40rpx;margin-top: 25rpx;
			.t1{
				width: 60rpx;float: left;background: #FF6A07;color: white;text-align:center;height: 40rpx;
			}
			.t2{
				float: left;color: #FF6A07;border: #FF6A07 3rpx solid;padding-left: 5rpx;padding-right: 5rpx;height: 40rpx;
			}
		}
		.d4{
			width: 90%;float: left;margin-left: 5%;font-size: 25rpx;color:#969CA1;text-align: center;border-top: #969CA1 3rpx dashed;margin-top: 20rpx;margin-bottom: 20rpx;
			.t1{
				width: 50%;float: left;border-right: #969CA1 3rpx solid;margin-top: 20rpx;margin-top: 20rpx;
			}
			.t2{
				width: 50%;float: left;margin-top: 20rpx;margin-top: 20rpx;
			}
		}
	}
	.go{
		width: 90%;float: left;margin-left: 5%;background: #1B63FF;color: white;margin-top: 100rpx;line-height: 70rpx;border-radius: 35rpx;text-align: center;
	}
</style>